<template>
	<view>
		<cu-custom bgColor="bg-black" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">商品分类管理</block>
			<block slot="right">
				<view @tap="addModelFlag">添加</view>
			</block>
		</cu-custom>
		<view>
			<view class="cu-bar bg-white">
				<view class="action border-title">
					<text class="text-xl text-bold text-black">全部分类</text>
					<text class="bg-gradual-red" style="width:3rem"></text>
				</view>
			</view>
			<view class="cu-list menu sm-border">
				<view class="cu-item arrow" v-for="(item,index) in data" :key="index" @tap="handle(item.id)">
					<view class="content">
						<text class="text-black">{{ item.name }}</text>
					</view>
					<view class="action">
						<text class="text-gray text-sm">时间：{{ item.createTime }}</text>
					</view>
				</view>
			</view>
			<view class="text-gray text-light text-center margin-xl" v-if="data.length > 0">
				<view class="cu-load load-cuIcon loading" v-show="isLoad">数据加载中，请稍后</view>
				<view class="" v-show="!isLoad" @tap="getlist">点击加载更多</view>
			</view>
		</view>
		<view class="cu-modal" :class="modelFlag?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{ editFlag?"编辑":"添加"}}分类</view>
					<view class="action" @tap="modelFlag = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="text-right">
					<form v-model="row">
						<view class="cu-form-group">
							<view class="title">分类名称</view>
							<input placeholder="请输入分类名称" v-model="row.name"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">上架展示</view>
							<switch @change="isPutOnA" :class="row.status==0?'checked':''" v-model="row.status" :checked="row.status==0?true:false"  name="status"></switch>
						</view>
					</form>
				</view>
				<view class="cu-bar bg-white solid-top">
					<!-- <view class="action margin-0 flex-sub solid-left text-red" @tap="del" v-show="editFlag">
						<text class="cuIcon-delete"></text>删除</view> -->
					<view class="action margin-0 flex-sub solid-left text-black" @tap="save">保存</view>
					
				</view>
			</view>
		</view>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	var _this;
	var defaultRow = {
		name: "",
		status: 0
	}
	import { getList, add, getDetail, remove } from "@/api/content/categories"
	export default {
		data() {
			return {
				modelFlag: false,
				isPutOn: false,
				editFlag: false,
				//分页
				size: 10,
				cur: 0,
				data: [],
				row: defaultRow,
				//数据加载
				isLoad: false
			}
		},
		onLoad() {
			_this = this;
			_this.getlist();
		},
		methods: {
			isPutOnA(e) {
				_this.row.status = e.detail.value?0:1
			},
			getlist(){
				uni.showLoading({
					title:"数据加载中"
				})
				var size = _this.size;
				_this.cur = _this.cur+1;
				getList(_this.cur, size, {}).then(res => {
					var data = res.data;
					console.log(data.records.length)
					if(data.records.length === 0){
						uni.showToast({
							title: "没有更多了",
							position: 'bottom',
							icon: "none"
						})
						return false;
					}
					_this.data = _this.data.concat(data.records);
					uni.hideLoading()
				}).catch(err => {
					console.log(err);
					uni.hideLoading()
				})
			},
			addModelFlag(){
				_this.modelFlag = true;
				_this.editFlag = false;
				_this.row = defaultRow;
			},
			save(){
				console.log(_this.row)
				uni.showLoading({
					title:"保存中"
				})
				add(_this.row).then(res => {
					uni.showToast({
						title:"保存成功",
						complete:function(){
							_this.cur = 0;
							_this.data = [];
							_this.getlist();
							_this.modelFlag = false;
						}
					})
					uni.hideLoading()
				}).catch(err => {
					console.log(err)
					uni.hideLoading()
				});
				
			},
			del(id){
				uni.showModal({
				    title: '您确认删除分类吗？',
				    content: '同时删除当前分类下的所有商品',
				    success: function (res) {
				        if (res.confirm) {
							uni.showLoading({
								title: "正在删除中"
							})
							remove(id).then(res => {
								uni.showToast({
									title:"删除完成"
								})
								_this.cur = 0;
								_this.data = [];
								_this.getlist();
								_this.modelFlag = false;
								uni.hideLoading()
							}).catch(err => {
								console.log(err)
								uni.hideLoading()
							})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			handle(id){
				uni.showActionSheet({
					title:'分类名称',
				    itemList: ['编辑分类', '删除'],
				    success: function (e) {
						switch(e.tapIndex){
							case 0:
								_this.modelFlag = true;
								_this.editFlag = true;
								uni.showLoading({
									title:"加载中"
								})
								getDetail(id).then(res => {
									_this.row = res.data;
									uni.hideLoading()
								}).catch(err => {
									console.log(err);
									uni.hideLoading()
								})
								break;
							case 1:
								_this.del(id);
								break;
							default:
								uni.showToast({
									title:"删除",
									icon:"none"
								})
								break;
						}
						
				        //console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				});
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
